<template>
	<view class="pageItem">
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-gengduo-copy" @tap="backPage"></view>
			<view class="text">个人资料</view>
		</view>
		<view class="clear_box"></view>
		<view class="main">
			<view class="row" style="padding: 15rpx 30rpx;">
				<view class="r_tit">头像</view>
				<view class="r_val">
					<image class="r_v_img" src="../../static/img01/tx01.png"></image>
				</view>
			</view>
			<view class="row">
				<view class="r_tit">昵称</view>
				<view class="r_val">
					<input class="r_v_inp" type="text" v-model="name"/>
				</view>
			</view>
			<view class="row">
				<view class="r_tit">会员等级</view>
				<view class="r_val">掌柜</view>
			</view>
			<view class="row">
				<view class="r_tit">性别</view>
				<view class="r_val">男</view>
			</view>
			<view class="row">
				<view class="r_tit">邮箱</view>
				<view class="r_val">
					<input class="r_v_inp" type="text" v-model="e_mail"/>
				</view>
			</view>
			<view class="row">
				<view class="r_tit">手机号</view>
				<view class="r_val">13020202020</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'可修改的名字',
				e_mail:'可修改的邮箱'
			};
		},
		methods:{
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},			
		}
	}
</script>
<style>
page{
	background: #F6F8FA;
	padding-bottom: 21vw !important;
}
.pageItem{
	width: 100%;
	box-sizing: border-box;
}
.pageItem *{
	box-sizing: border-box;
}
</style>
<style lang="scss">
.main{
	width: 100%;
	padding: 4vw 4%;
	.row:not(:first-child){
		margin-top: 25rpx;
	}
	.row{
		width: 100%;
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-radius: 25rpx;
		background: #ffffff;
		.r_tit{
			width: 200rpx;
			color: #333333;
			font-weight: 4vw;
			font-weight: bold;
		}
		.r_val{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #999999;
			font-size: 4vw;
			.r_v_img{
				width: 10vw;
				height: 10vw;
				border-radius: 50%;
			}
			.r_v_inp{
				flex: 1;
				text-align: right;
			}
		}
	}
}
.footer{
	position: fixed;
	z-index: 98;
	width: 100%;
	height: 19vw;
	padding: 2vw 4% 5vw;
	bottom: 0;
	left: 0;
	background: #F6F8FA;
	.btn{
		height: 12vw;
		line-height: 12vw;
		border-radius: 7vw;
		text-align: center;
		width: 100%;
		background: #0DA4AD;
		font-size: 5vw;
		color: #ffffff;
		letter-spacing: 3rpx;
	}
}
</style>
